<template>
    <div id="canvas"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue"
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/Addons.js"
import vertexShader from "@/shader/raw/vertexShader.glsl?raw"
import fragmentShader from "@/shader/raw/fragmentShader.glsl?raw"

const init3D = (canvasDOM:HTMLDivElement) => {
    let scene = new THREE.Scene()
    let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
    camera.position.set(10,20,30)
    scene.add(camera)

    const planeGeo = new THREE.PlaneGeometry(10,10)
    // const sahderMaterial = new THREE.ShaderMaterial({
    const sahderMaterial = new THREE.RawShaderMaterial({
        vertexShader:vertexShader,
        fragmentShader:fragmentShader
    })
    const mesh = new THREE.Mesh(planeGeo,sahderMaterial)
    scene.add(mesh)

    const ambientLight = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( ambientLight );
    
    const axesHelper = new THREE.AxesHelper( 500 );
    scene.add( axesHelper );

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth,window.innerHeight)
    canvasDOM.appendChild(renderer.domElement)
    
    const controls = new OrbitControls(camera,canvasDOM)
    const render = () => {
        renderer.render(scene,camera)
        requestAnimationFrame(render)
    }
    requestAnimationFrame(render)
}

onMounted(()=>{
    let canvasDOM = document.getElementById("canvas") as HTMLDivElement
    init3D(canvasDOM)
})
</script>
<style scoped>
#canvas{
    width: 100vw;
    height: 100vh;
    
}
#canvas canvas{
    width: 100%;
    height: 100%;
}
</style>